<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<script src="vue.js" type="text/javascript" charset="utf-8"></script>
	</head>

	<body>
		<div id="app">
			<!--
				1：指令v-if,条件渲染，后面跟的是js表达式返回true/false,当true时该dom渲染，当false时该dom从文档流中被移除，没有该dom
				而指令v-show后面也是跟的js表达式返回true/false,当true时该dom显示，false时该dom被隐藏display为none，文档中有该dom；
				v-show只是控制dom的显示与隐藏，不会重新渲染dom，如果一个dom经常切换隐藏还是显示则建议使用v-show
				2：v-if v-else-if v-else 根据条件进行渲染，它们中间不能有其他的 dom，要紧挨着写
				3：key值的用法：key是dom在页面的标识，vue的机制是尽量复用页面的dom，如果加入key值进行标识则进行dom的区分，这是虚拟dom 的一个算法；
			-->
			<div v-if="show">
				用户名： <input class="user" type="text" name="" id="" value="" key="1" />
			</div>
			<!--<div v-else-if=""></div>-->
			<div v-else>邮箱名： <input  class="password" type="text" name="" id="" value="" key="2" /></div>

			<!--<div v-show="show">{{msg1}}</div>-->
		</div>
		<script type="text/javascript">
			var vm = new Vue({
				el: "#app",
				data: {
					show: true,
					sss: "a",
					msg: "Hello v-if",
					msg1: "Hello v-show"
				},
				methods: {

				}
			})
		</script>

	</body>

</html>